<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item class="a">本页为实验页面，随意修改吧-v-</el-breadcrumb-item>
        </el-breadcrumb>
        <el-container>
            <el-header>
                <el-row style="margin-top: 16px">
                    <el-select v-model="query.id" clearable placeholder="请选择园区">
                        <el-option
                                v-for="item in ids"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="query.name" clearable placeholder="请选择楼栋">
                        <el-option
                                v-for="item in names"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="query.roleId" clearable  placeholder="请选择楼层">
                        <el-option
                                v-for="item in roles"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button  @click="getUserList" round style="width: 90px;border-radius: 5px;background: #275ce6;"><div class="txtx">查询</div></el-button>
                    <el-button class="btbt"><div class="txtx2"></div>重置</el-button>
                    <el-button @click="removeBtns" type="danger"><div class="txtx2"></div>删除选中</el-button>
                    <el-button @click="exportUsers" type="primary"><div class="txtx2"></div>导出数据</el-button>
                    <el-upload
                        class="upload-demo"
                        action="/api/file/upload"
                        :show-file-list="false">
                        <el-button type="primary">导入数据</el-button>
                    </el-upload>
                </el-row>
            </el-header>
            <el-main class="std" >
                <el-table
                    @selection-change="selectChange"
                        :data="users.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                        style="width: 100%"
                        stripe>
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="园区"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="楼栋"
                            width="180">
                    </el-table-column>
                    <el-table-column
                        prop="url"
                        label="图片"
                        width="180">
                        <template slot-scope="scope">
                            <img v-if="scope.row.url" height="100px" :src="scope.row.url" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="sn"
                            label="楼层">
                    </el-table-column>
                    <el-table-column
                            prop="roleId"
                            label="房间编号">
                        <template slot-scope="scope">
                            {{formatRole(scope.row.roleId)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button
                                @click="removeBtn(scope.row.id)"
                                type="text"
                                size="small">删除
                            </el-button>
                            <el-button
                                @click="edit(scope.row)"
                                type="text"
                                size="small">编辑
                            </el-button>
                            <UserEditDialog @ok="getUserList" ref="userEdit"/>
                            <a :href="scope.row.url" download="测试头像.png">下载文件</a>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer class="std2" >
                <el-pagination
                        class="btm_choseBox"
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="query.pageNo"
                        :page-sizes="[10,20,50,100]"
                        :page-size="query.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
import {userList, removeUser, removeUsers, exportUser} from '../../../../api/user'
import UserEditDialog from '../../components/user/UserEditDialog.vue'
export default {
  name: 'second',
  components: {
    UserEditDialog
  },
  data () {
    return {
      currentPage: '1',
      pagesize: '20',
      ht: null,
      timer: null,
      users: [],
      roles: [{
        value: 1,
        label: '超级管理员'
      }, {
        value: 2,
        label: '二级管理员'
      }, {
        value: 3,
        label: '普通用户'
      }],
      query: {
        id: '',
        name: '',
        roleId: '',
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      selectUsers: []
    }
  },
  methods: {
    exportUsers () {
      exportUser().then(res => {
        let blob = new Blob([res], {type: 'application/vnd.ms-excel'}) // 为blob设置文件类型，这里以.xlsx为例
        let url = window.URL.createObjectURL(blob) // 创建一个临时的url指向blob对象
        let a = document.createElement('a')
        a.href = url
        a.download = '白名单列表.xls'
        a.click()
        // 释放这个临时的对象url
        window.URL.revokeObjectURL(url)
      })
    },
    edit (row) {
      this.$refs.userEdit.show(row, this.roles)
    },
    selectChange (value) {
      // 这里的value就是选中的数据构成的数组
      this.selectUsers = value
    },
    removeBtns () {
      // 获取选中的数据，根据数据获取要删除的id
      let ids = []
      for (var i = 0; i < this.selectUsers.length; i++) {
        ids.push(this.selectUsers[i].id)
      }
      // let ids = this.selectUsers.map(user => user.id)
      console.info(ids)
      this.$confirm('此操作将永久删除选择的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {
          ids: ids
        }
        removeUsers(obj).then(res => {
          if (res.data) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getUserList()
          } else {
            this.$message({
              type: 'warning',
              message: '删除失败，原因不明'
            })
          }
        }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    removeBtn (id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeUser(id).then(res => {
          if (res.data) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getUserList()
          } else {
            this.$message({
              type: 'warning',
              message: '删除失败，原因不明'
            })
          }
        }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getUserList () {
      userList(this.query).then(res => {
        this.users = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange (size) {
      this.query.pagesize = size
      this.getUserList()
    },
    handleCurrentChange (currentPage) {
      this.query.pageNo = currentPage
      this.getUserList()
    },
    formatRole (roleId) {
      switch (Number(roleId)) {
        case 1:
          return '超级管理员'
        case 2:
          return '二级管理员'
        case 3:
          return '普通用户'
      }
    }
  },
  created () {
    this.getUserList()
  }
}
</script>
<style lang="less" scoped>
@import "../../../../assets/styles/pages";
.el-container{
  margin-top: 16px;
  background: #FFFFFF;
}
.btbt{
  width: 90px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #275ce6;
}
.txtx{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.19px;
  text-align: left;
  color: #fff;
}
.txtx2{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.19px;
  text-align: left;
  color: #275ce6;
}
.upload-demo{
    margin-left:1088px;
    margin-top: -39px;
}
</style>
